<template>
  <div>
    <el-table
    :data="userData"
    border
    style="width: 100%"
    class="table">
    <el-table-column
      fixed
      prop="username"
      label="用户名"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="gender"
      label="性别"
      width="120">
    </el-table-column>
    <el-table-column
      prop="permissionId"
      label="权限"
      width="120">
    </el-table-column>
    <el-table-column
      prop="location"
      label="地址"
      width="300">
    </el-table-column>
    
    <el-table-column
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-popover width="200" title="" content="" trigger="hover" placement="bottom" >
            <el-input placeholder="权限" v-model="num"></el-input>
                  <el-button slot="reference" @click="updateUser(scope.row)" type="text" size="small">修改权限</el-button>
                  <el-button slot="reference" @click="deleteUser(scope.row)" type="text" size="small">删除</el-button>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    :total="total"
    :page-size="pageSize"
    :page-sizes="[5, 10, 15, 20, 25]"
    :current-page="pageNum"
    :page-count="totalPage"
    layout="total, sizes, prev, pager, next, jumper"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  ></el-pagination>
  </div>
</template>

<script>
import service from '@/axios/axiosConfig'
export default {
    data() {
        return {
            userData: [],
          num: '',
            total: "",
      pageNum: 1,
      pageSize: 5,
        }
    },
    async created() {
        const responseBody = {
            pageNum: this.pageNum,
            pageSize: this.pageSize
        }
        console.log(responseBody)
        const response = await service.post('http://localhost:8080/adminUser/getAllUsers',responseBody)
        this.userData = response.data.data.list
      console.log(response.data.data.list)
        this.total = response.data.data.total
    },
    methods: {
        async deleteUser(row) {
            const responseBody = {
                orderId: row.userId
            }
            const response = await service.post('http://localhost:8080/adminUser/deleteUser', responseBody)
            console.log(response)
            this.$message.success("删除成功")
            this.$router.go(0)
        },
        async updateUser(row) {
            const responseBody = {
                permissionId: this.num,
                userId: row.userId
            }
            const response = await service.post('http://localhost:8080/adminUser/updateUser', responseBody)
            console.log(response)
            this.$message.success("修改成功")
            this.$router.go(0)
      },
      async handleCurrentChange(newPageNum) {
        this.pageNum = newPageNum
        const responseBody = {
            pageNum: this.pageNum,
            pageSize: this.pageSize
        }
        console.log(responseBody)
        const response = await service.post('http://localhost:8080/adminUser/getAllUsers',responseBody)
        this.userData = response.data.data.list
        console.log(response.data.data.list)
      },
      async handleSizeChange(newPageSize) {
        this.pageSize = newPageSize
        const responseBody = {
            pageNum: this.pageNum,
            pageSize: this.pageSize
        }
        console.log(responseBody)
        const response = await service.post('http://localhost:8080/adminUser/getAllUsers',responseBody)
        this.userData = response.data.data.list
        console.log(response.data.data.list)
      }
    }
};
</script>